<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>机票查询 | 首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet" />
    <style>
        body {
            background: linear-gradient(135deg, #1e3c72, #2a5298);
            font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
            color: #fff;
        }
        .search-box {
            max-width: 960px;
            margin: 5rem auto;
            padding: 3rem;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 2rem;
            backdrop-filter: blur(10px);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }
        .form-label {
            font-weight: 600;
            color: #f1f1f1;
        }
        .form-control {
            background-color: rgba(255, 255, 255, 0.9);
            border: none;
            border-radius: 0.75rem;
        }
        .form-control:focus {
            box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
        }
        .suggest-box {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            z-index: 1000;
            max-height: 230px;
            overflow-y: auto;
        }
        .suggest-item {
            cursor: pointer;
        }
        .suggest-item:hover {
            background: #f1f1f1;
        }
        .form-section { margin-bottom: 1.5rem; }
        .btn-primary {
            background: #ff7b00;
            border: none;
            font-size: 1.1rem;
            font-weight: 600;
            padding: 0.75rem 1.5rem;
            border-radius: 2rem;
            transition: background 0.3s;
        }
        .btn-primary:hover { background: #ff9d2e; }
        h2 { font-size: 2.2rem; font-weight: bold; color: #ffffff; text-shadow: 0 2px 4px rgba(0,0,0,0.4); }
        .icon-arrow {
            font-size: 2rem;
            color: #ffcc70;
            text-align: center;
            line-height: 3rem;
            animation: bounce 1.5s infinite alternate ease-in-out;
        }
        @keyframes bounce { from {transform: translateX(-5px);} to {transform: translateX(5px);} }
    </style>
</head>
<body>
<div class="container">
    <div class="search-box">
        <h2 class="text-center mb-4"><i class="bi bi-airplane-engines me-2"></i>探索你的下一段旅程</h2>
        <form th:action="@{/order/planeTicket/search}" method="get" autocomplete="off">
            <div class="row g-0 align-items-center form-section position-relative">
                <!-- 出发城市 -->
                <div class="col-md-5 pe-2 position-relative">
                    <label class="form-label">出发城市</label>
                    <input
                            id="departureCity"
                            name="departureCity"
                            class="form-control"
                            placeholder="输入城市或机场"
                            required
                    />
                    <ul id="departureList" class="list-group suggest-box"></ul>
                </div>
                <!-- 箭头 -->
                <div class="col-md-2 text-center">
                    <div class="icon-arrow"><i class="bi bi-arrow-left-right"></i></div>
                </div>
                <!-- 目的城市 -->
                <div class="col-md-5 ps-2 position-relative">
                    <label class="form-label">目的城市</label>
                    <input
                            id="arrivalCity"
                            name="arrivalCity"
                            class="form-control"
                            placeholder="输入城市或机场"
                            required
                    />
                    <ul id="arrivalList" class="list-group suggest-box"></ul>
                </div>
            </div>

            <div class="row g-4 form-section">
                <div class="col-md-6">
                    <label class="form-label">出发日期</label>
                    <input type="date" name="departureDate" id="departureDate" class="form-control"  />
                </div>
                <div class="col-md-6" id="returnDateDiv" style="display:none;">
                    <label class="form-label">返程日期</label>
                    <input type="date" name="returnDate" id="returnDate" class="form-control" />
                </div>
            </div>

            <div class="form-check form-switch mt-3 mb-3">
                <input class="form-check-input" type="checkbox" id="isRoundTrip" name="roundTrip" value="true" onchange="toggleReturnDate()" />
                <label class="form-check-label" for="isRoundTrip" style="color: #fff;">往返</label>
            </div>

            <div class="d-grid mt-4">
                <button class="btn btn-primary btn-lg" type="submit"><i class="bi bi-search me-2"></i> 查询航班</button>
            </div>
        </form>
    </div>
</div>

<script>
    // ===== 自动补全逻辑 =====
    function setupAutoComplete(inputId, listId) {
        const input = document.getElementById(inputId);
        const list  = document.getElementById(listId);

        input.addEventListener("input", () => {
            const keyword = input.value.trim();
            if (keyword.length < 1) { list.innerHTML = ""; return; }
            fetch(`/order/airport/query?keyword=${encodeURIComponent(keyword)}`)
                .then(res => res.json())
                .then(data => {
                    list.innerHTML = "";
                    data.forEach(item => {
                        const li = document.createElement("li");
                        li.className = "list-group-item list-group-item-action suggest-item";
                        li.textContent = `${item.cityName} (${item.countryName})`;
                        li.onclick = () => {
                            input.value = `${item.cityName}`;
                            list.innerHTML = "";
                        };
                        list.appendChild(li);
                    });
                });
        });
        // 点击外部隐藏列表
        document.addEventListener("click", (e) => {
            if (!input.contains(e.target) && !list.contains(e.target)) {
                list.innerHTML = "";
            }
        });
    }

    setupAutoComplete("departureCity", "departureList");
    setupAutoComplete("arrivalCity", "arrivalList");

    // ===== 往返日期控制 =====
    function toggleReturnDate() {
        const checkbox = document.getElementById("isRoundTrip");
        const returnDateDiv = document.getElementById("returnDateDiv");
        returnDateDiv.style.display = checkbox.checked ? "block" : "none";
    }

    document.addEventListener("DOMContentLoaded", () => {
        const departureInput = document.getElementById("departureDate");
        const returnInput = document.getElementById("returnDate");
        const today = new Date().toISOString().split("T")[0];
        departureInput.min = today;
        //departureInput.value = today;
        returnInput.min = today;
        departureInput.addEventListener("change", () => {
            returnInput.min = departureInput.value;
            if (returnInput.value && returnInput.value < departureInput.value) { returnInput.value = departureInput.value; }
        });
    });
</script>
</body>
</html>
